<template>
	<view class="padding-30">
		<view class="padding-30 bg-fff border-radius20">
			<view class="flex-center">
				<view class="image-view" @click="uploadImage">
					<template v-if="userImage">
						<image class="img-160 border-radius50 img-crisp-edges" :src="userImage" mode="aspectFill"></image>
					</template>
					<template v-else>
						<image class="img-160 border-radius50 img-crisp-edges" src='../../../static/logo.png' mode="aspectFill"></image>
					</template>
					<image class="img-68 image-edit img-crisp-edges" src="../../../static/images/12.png" mode=""></image>
				</view>
			</view>
			<view class="flex-alignItems-center f-divider1 padding-30-0">
				<view class="fontSize-15 color-000 margin-right20">姓名</view>
				<input type="text" v-model="nickname" class="input-item1" placeholder="请输入姓名" />
			</view>
			<view class="flex-between f-divider1 padding-30-0" @click="sexShow = true">
				<view class="fontSize-15 color-000 margin-right20">地址：</view>
				<view class="flex-alignItems-center">
					<view class="fontSize-15 color-000">{{genderText}}</view>
					<u-icon name="arrow-right" color="#333333" size="18"></u-icon>
				</view>
			</view>
			<view class="flex-alignItems-center f-divider1 padding-30-0">
				<view class="fontSize-15 color-000 margin-right20">详细地址：</view>
				<input type="text" v-model="userinfo.user_id" class="input-item1" disabled/>
			</view>
			<view class="flex-alignItems-center f-divider1 padding-30-0">
				<view class="fontSize-15 color-000 margin-right20">联系方式</view>
				<input type="number" v-model="mobile" class="input-item1" maxlength="11" placeholder="请输入联系方式" />
			</view>
			<view class="flex-alignItems-center f-divider1 padding-30-0">
				<view class="fontSize-15 color-000 margin-right20">品牌:</view>
				<input type="text" v-model="nickname" class="input-item1" placeholder="请输入姓名" />
			</view>
			<view class="flex-alignItems-center f-divider1 padding-30-0 margin-bottom30">
				<view class="fontSize-15 color-000 margin-right20">型号</view>
				<input type="text" v-model="nickname" class="input-item1" placeholder="请输入姓名" />
			</view>
			<view class="margin-bottom30">
				<view class="fontSize-15 color-000 margin-bottom20">实名认证:</view>
				<view class="flex-alignItems-center">
					<view class="flex-justAliCenter-column card-view">
						<image class="img-101 margin-bottom20" src="../../../static/images/01.png" mode=""></image>
						<view class="fontSize-13" style="color: #A6A6A6;">上传身份证正面</view>
					</view>
					<view class="flex-justAliCenter-column card-view">
						<image class="img-101 margin-bottom20" src="../../../static/images/02.png" mode=""></image>
						<view class="fontSize-13" style="color: #A6A6A6;">上传身份证背面</view>
					</view>
				</view>
			</view>
			<view class="margin-bottom30">
				<view class="fontSize-15 color-000 margin-bottom20">飞行证:</view>
				<view class="flex-alignItems-center">
					<view class="flex-justAliCenter-column card-view">
						<image class="img-101 margin-bottom20" src="../../../static/images/02.png" mode=""></image>
						<view class="fontSize-13" style="color: #A6A6A6;">证书正面</view>
					</view>
					<view class="flex-justAliCenter-column card-view">
						<image class="img-101 margin-bottom20" src="../../../static/images/03.png" mode=""></image>
						<view class="fontSize-13" style="color: #A6A6A6;">证书背面</view>
					</view>
				</view>
			</view>
			<view class="margin-bottom30">
				<view class="fontSize-15 color-000 margin-bottom20">保险凭证:</view>
				<view class="flex-alignItems-center">
					<view class="flex-justAliCenter-column card-view">
						<image class="img-101 margin-bottom20" src="../../../static/images/03.png" mode=""></image>
						<view class="fontSize-13" style="color: #A6A6A6;">上传照片</view>
					</view>
					<view class="flex-justAliCenter-column card-view">
						<image class="img-101 margin-bottom20" src="../../../static/images/04.png" mode=""></image>
						<view class="fontSize-13" style="color: #A6A6A6;">上传照片</view>
					</view>
				</view>
			</view>
			<view class="margin-bottom30">
				<view class="fontSize-15 color-000 margin-bottom20">飞机名牌照片:</view>
				<view class="flex-alignItems-center">
					<view class="flex-justAliCenter-column card-view1">
						<image class="img-101 margin-bottom20" src="../../../static/images/03.png" mode=""></image>
						<view class="fontSize-13" style="color: #A6A6A6;">上传照片</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="btn-5A8AFF-15fff50 flex-center flex1 margin-top150" @click="SubmitEvent">
			保存
		</view>
		
	    <!-- 性别弹窗 -->
		<u-picker :show="sexShow" :columns="sexColumns" @confirm="sexConfirm" @cancel="sexCancel"></u-picker>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				nickname:'', 
				mobile:'',
				avatar:'', // 头像
				userImage:'',
				userinfo:{},
				sexShow:false,
				sexColumns:[
					['女','男']
				],
				gender:0 , // 性别	女0男1(可选)
				genderText:'女'
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods:{
			// 确认性别
			sexConfirm(e){
				console.log(e)
				if(e.value == '女'){
					this.gender = 0
					this.genderText = '女'
				}else{
					this.gender = 1
					this.genderText = '男'
				}
				this.sexShow = false
			},
			// 取消性别
			sexCancel(){
				this.gender = 0
				this.genderText = '女'
				this.sexShow = false
			},
			// 提交
			async SubmitEvent(){
				let form = {
					nickname:this.nickname,
					mobile:this.mobile,
					avatar:this.avatar,
					gender:this.gender
				}
				if(!this.nickname) return this.$tools.toast('请输入姓名')
				if(!this.mobile) return this.$tools.toast('请输入联系方式')
				if(!this.avatar) return this.$tools.toast('请上传头像')
				let res = await this.$http.post(this.$api.profile,form,{token:true})
				if(res.code == 1){
					this.$tools.toast('保存成功')
					this.$tools.navigateBack(1,200)
				}
			},
			// 选择头像
			uploadImage() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					success: function(res) {
						uni.uploadFile({
							url: that.$api.upload + 'common/upload',
							filePath: res.tempFilePaths[0],
							name:'file',
							header: {
								'token': uni.getStorageSync('token'),
							},
							success: res => {
								let result = JSON.parse(res.data);
						        console.log(result)
								that.userImage = result.data.fullurl
								that.avatar = result.data.url
							}
						});
					}
				});
			},
			// 获取用户信息
			async getUserInfo(){
				let res = await this.$http.post(this.$api.user_info,{},{token:true})
				if(res.code == 1){
					this.userinfo = res.data
					this.nickname = res.data.nickname
					this.mobile = res.data.mobile
					this.avatar = res.data.avatar
					this.userImage = res.data.avatar
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-view1{
		width: 245rpx;
		padding: 30rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.img-101{
		width: 120rpx;
		height: 100rpx;
	}
	.card-view:nth-child(2n){
		margin-right: 0;
	}
	.card-view{
		flex: 1;
		padding: 30rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	
	.btn-500BA062-15ffffff{
		padding: 30rpx;
		border-radius: 50rpx;
		background: #23C68A;
		font-size: 15px;
		color: #ffffff;
	}
	.input-item1{
		flex: 1;
		text-align: right;
	}
	.image-edit{
		position: absolute;
		bottom: -10rpx;
		right: -20rpx;
	}
	.image-view{
		width: 160rpx;
		height: 160rpx;
		position: relative;
		margin: 50rpx 0;
	}
</style>